<template>
	<view class="order-detail">
		<view class="order-detail-bg"></view>
		<view class="inner" v-if="detail!='' && detail!=null">
			<view class="dizhi">
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/order/dingwei.png" mode="widthFix" class="dingwei-img"/>
				<view class="right">
					<view class="right-left">
						<view class="right-left-top">
							<text>{{detail.consignee}}</text>
							<text class="phone">{{detail.mobile}}</text>
						</view>
						<view class="right-left-bot">{{detail.province+detail.city+detail.district+detail.address}}</view>
					</view>
				</view>
			</view>
			<view class="confirm-order-goods shop-confirm-order-goods">
				<view class="shop-confirm-order-goods-top">
					<view class="left">
						<image :src="store_info.wap_login_logo" class="logo-img" mode="widthFix"/>
						<text>{{store_info.store_title}}</text>
					</view>
				</view>
				<view class="order-goods-items">
					<view class="order-goods-item">
						<image :src="detail.goods_img" class="goods-img"></image>
						<view class="right">
							<view class="goods-name">{{detail.goods_name}}</view>
							<view class="goods-bot">
								<view class="goods-bot-left">
									<text>¥</text>
									<text class="large">{{detail.goods_price}}</text>
								</view>
								<view class="goods-bot-right">x{{detail.goods_num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rows">
					<view class="row">
						<view class="left">运费</view>
						<view class="right black">¥{{detail.ship_price}}</view>
					</view>
					<view class="row">
						<view class="left">小计</view>
						<view class="right black">¥{{detail.total_amount}}</view>
					</view>
					<view class="row">
						<view class="left">备注</view>
						<view class="right black">{{detail.user_note ? detail.user_note : '无'}}</view>
					</view>
					<view class="row shifu">
						<view class="left">实付</view>
						<view class="right">
							<text>¥</text>
							<text class="amount">{{detail.order_amount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="order-info-row">
					<view class="left">订单编号：{{detail.order_sn}}</view>
					<view class="right copy" @click="copy">复制</view>
				</view>
				<view class="order-info-row">
					<view class="left">订单状态</view>
					<view class="right">{{detail.order_status_text}}</view>
				</view>
				<view class="order-info-row">
					<view class="left">支付方式</view>
					<view class="right">{{detail.pay_name}}</view>
				</view>
				<view class="order-info-row">
					<view class="left">下单时间</view>
					<view class="right">{{detail.add_time}}</view>
				</view>
				<view class="order-info-row" v-if="detail.pay_time">
					<view class="left">支付时间</view>
					<view class="right">{{detail.pay_time}}</view>
				</view>
				<view class="order-info-row" v-if="detail.shipping_time">
					<view class="left">发货时间</view>
					<view class="right">{{detail.shipping_time}}</view>
				</view>
				<view class="order-info-row" v-if="detail.shipping_name">
					<view class="left">快递公司</view>
					<view class="right">{{detail.shipping_name}}</view>
				</view>
				<view class="order-info-row" v-if="detail.shipping_number">
					<view class="left">快递单号</view>
					<view class="right">{{detail.shipping_number}}</view>
				</view>
				<view class="order-info-row" v-if="detail.confirm_time">
					<view class="left">收货时间</view>
					<view class="right">{{detail.confirm_time}}</view>
				</view>
				<view class="order-info-row">
					<view class="left">提货方式</view>
					<view class="right">{{detail.delivery_text}}</view>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;" v-if="detail.order_status==1"></view>
		<view style="height: 20rpx;" v-else></view>
		<view class="order-detail-bot" v-if="detail.order_status==1">
			<view class="left"></view>
			<view class="order-detail-bot-right">
				<button type="default" class="theme" @click="show=true" :disabled="btnDisabled">确认核销</button>	
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="show" round="10"
			:overlay="true" :customStyle="customStyle1" @close="show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认核销？</text>
				<view class="u-popup-slot_flex">
					<button @click="show = !show" class="cancel">取消</button>
					<button @click="confirm()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				customStyle1: {
					'width': '80%',
				},
				btnDisabled:false,
				store_info:'',
				show: false,
				detail:'',
				form:{
					step:1,
					order_id:0
				}
			}
		},
		onLoad(e) {
			_this=this
			if(e.id==undefined){
				uni.$u.toast('提交参数有误');
				setTimeout(()=>{
					uni.navigateBack({})
				},2000)
				return;
			}
			this.form.order_id=e.id
			this.get_dh_dd_xq()
		},
		methods: {
			//获取订单详情数据
			async get_dh_dd_xq(){
				const data = await _this.$post('api/dh_dd_hx',_this.form)
				if(data.code==10){
					this.detail = data.data.order
					this.store_info = data.data.store_info
				}else if(data.code==100){
					uni.$u.toast(data.msg)
					setTimeout(()=>{
						uni.navigateBack({})
					},2000)
				}else{
					uni.$u.toast(data.msg)
				}
			},
			//确认核销
			confirm(){
				_this.btnDisabled=true
				_this.form.step=2
				_this.get_dh_dd_xq()
				setTimeout(()=>{
					_this.btnDisabled=false
				},2000)
			},
			copy(){
				uni.setClipboardData({
					data:_this.detail.order_sn,
					success() {
						uni.$u.toast('复制成功')
					}
				})
			},
			goDetail(goods_id){
				uni.navigateTo({
					url:'/pages/cart/show?id='+goods_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/order.scss";
	.shop-confirm-order-goods-top{
		@include flex-box(row,space-between,center);
		height: 100rpx;
		border-bottom: $global-border;
		.left{
			@include flex-box(row,null,center);
			.logo-img{
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			text{
				font-size: 32rpx;
				font-weight: 500;
			}
		}
		.right{
			border: 2rpx solid $color-919191;
			height: 40rpx;
			border-radius: 30rpx;
			@include flex-box(row,null,center);
			padding: 0 20rpx;
			.zt-img{
				width: 30rpx;
			}
			text{
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}
	.ztm-popup{
		@include flex-box(row,center,center);
		image{
			width: 340rpx;
		}
	}
</style>